<template>
  <div :class="getComponentClass('sh-file')">
    <div class="sign" v-if="attachmentConfigs.showStandard">
      <img v-if="file.approveStatus == 1" :src="Standard" class="sign-left" />
      <img v-if="file.approveStatus == -1" :src="BelowStandard" class="sign-left" />
    </div>
    <div class="file-type">
      <img v-if="judgeFileType() == 'image'" :src="file.thumbnailUrl" @click.stop="openProview" />
      <img v-else :src="judgeFileType()" @click.stop="openProview" />
      <div class="actions">
        <Icon v-if="attachmentConfigs.showDown" type="md-arrow-down" @click="download" />
        <Icon v-if="attachmentConfigs.showDelete" type="ios-trash-outline" @click="deleteFile" />
      </div>
    </div>
  </div>
</template>

<script setup>
import Standard from './assets/standard.png';
import BelowStandard from './assets/below-standard.png';

import { useClass } from '../../utils/useClass';
import { useFile } from './utils/useFile';
import { useDependencyInjection } from '../../utils/useDependencyInjection';
/**
 * @description:
 * @param: approveStatus 合格/不合格
 * @returns:
 */
const props = defineProps({
  file: {
    type: Object,
  },
  attachmentConfigs: {
    type: Object
  },
  beforeDelete: {
    type: Function,
    default: () => {},
  }
});
const emits = defineEmits(['openProview', 'deleteFile']);

const { getComponentClass } = useClass();
const { getInject } = useDependencyInjection();
// const { beforeDelete } = getInject(['beforeDelete']);

const { judgeFileType, download, deleteFile, openProview } = useFile(props, emits);
</script>

<style scoped></style>
